<template>
  <div class="box">
    <div class="searcharea">
      <!-- 搜索 -->
      <el-row>
        <el-col :span="24">
          <div class="query">
            <el-form :inline="true" :model="queryMenuInfoParam" class="demo-form-inline">
              <el-form-item label="菜单名称">
                <el-input
                  v-model="queryMenuInfoParam.MenuInfoName"
                  placeholder="请输入"
                  clearable
                  style="width: 200px"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" :icon="Search" @click="SearchMenuInfo()">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="contentarea">
      <!-- 功能按钮 -->
      <el-row>
        <el-col :span="24">
          <div class="functionbutton">
            <el-button type="primary" plain @click="addMenuInfo()">添加</el-button>
            <el-button type="danger" plain @click="batchDeletionMenuInfo()">批量删除</el-button>
          </div>
        </el-col>

        <!--  添加菜单-->
        <el-dialog v-model="centerDialogVisible" title="添加菜单" width="30%" align-center>
          <el-form
            ref="CreateMenuInfoForm"
            :model="CreateMenuInfoForm"
            :rules="CreateMenuInfoRules"
            label-width="auto"
            style="padding: 20px"
          >
            <el-form-item prop="MenuInfoName" label="名称">
              <el-input v-model="CreateMenuInfoForm.MenuInfoName" placeholder="请输入菜单名称"> </el-input>
            </el-form-item>

            <el-form-item prop="Path" label="地址">
              <el-input v-model="CreateMenuInfoForm.Path" placeholder="请输入"> </el-input>
            </el-form-item>

            <el-form-item label="父菜单">
              <el-select v-model="CreateMenuInfoForm.ParentId" filterable placeholder="请选择" clearable>
                <el-option
                  v-for="option in MenuInfoOptions"
                  :key="option.id"
                  :label="option.menuInfoName"
                  :value="option.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="图标">
              <el-input v-model="CreateMenuInfoForm.Icon" placeholder="请输入"> </el-input>
            </el-form-item>

            <el-form-item label="排序">
              <el-input v-model="CreateMenuInfoForm.Sort" placeholder="不输入则自动生成"> </el-input>
            </el-form-item>
          </el-form>

          <template #footer>
            <div class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="CreateMenuInfoDialog()">确认</el-button>
            </div>
          </template>
        </el-dialog>
      </el-row>

      <!-- 数据表格 -->
      <el-row>
        <el-col :span="24">
          <div>
            <el-table
              :data="tableData"
              :selection="selectedRows"
              @selection-change="handleSelectionChange"
              @row-click="getRowkey"
              show-overflow-tooltip
              empty-text="暂无数据"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              max-height="500px"
              border
            >
              <el-table-column type="selection" width="55" />
              <el-table-column type="index" label="序号" />
              <el-table-column prop="menuInfoName" label="菜单名称" />
              <el-table-column prop="path" label="地址" />

              <el-table-column prop="icon" label="图标" width="100px" align="center">
                <template #default="scope">
                  <el-icon><component :is="scope.row.icon" /></el-icon>
                </template>
              </el-table-column>

              <el-table-column prop="sort" label="排序" align="center" />
              <el-table-column prop="creator" label="创建人" align="center" />
              <el-table-column prop="updator" label="修改人" align="center" />
              <el-table-column
                prop="createtime"
                label="创建时间"
                width="180"
                :formatter="formatColumnTime"
                align="center"
              />
              <el-table-column
                prop="updateDate"
                label="更新时间"
                width="180"
                :formatter="formatColumnTime"
                align="center"
              />
              <el-table-column fixed="right" label="操作" width="140">
                <template #default="scope">
                  <el-button type="danger" plain size="small" @click="DeleteMenuInfoSingle(scope.row.id)">
                    删除
                  </el-button>

                  <el-button type="primary" plain size="small" @click="UpdateMenuInfo(scope.row)">更新</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>

        <el-dialog v-model="UpdateDialogVisible" title="修改菜单" width="30%" align-center>
          <el-form
            ref="UpdateMenuInfoForm"
            :model="UpdateMenuInfoForm"
            :rules="CreateMenuInfoRules"
            label-width="auto"
            style="padding: 20px"
          >
            <el-form-item prop="MenuInfoName" label="名称">
              <el-input v-model="UpdateMenuInfoForm.MenuInfoName" placeholder="请输入菜单名称"> </el-input>
            </el-form-item>

            <el-form-item prop="Path" label="地址">
              <el-input v-model="UpdateMenuInfoForm.Path" placeholder="请输入"> </el-input>
            </el-form-item>

            <el-form-item label="父菜单">
              <el-select v-model="UpdateMenuInfoForm.ParentId" filterable placeholder="请选择">
                <el-option v-for="item in MenuInfoOptions" :key="item.key" :label="item.menuInfoName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="图标">
              <el-input v-model="UpdateMenuInfoForm.Icon" placeholder="请输入"> </el-input>
            </el-form-item>

            <el-form-item label="排序">
              <el-input v-model="UpdateMenuInfoForm.Sort" type="number" placeholder="不输入则自动生成"> </el-input>
            </el-form-item>
          </el-form>

          <template #footer>
            <div class="dialog-footer">
              <el-button @click="UpdateDialogVisible = false">取消</el-button>
              <el-button type="primary" @click="UpdateMenuInfoDialog()">确认</el-button>
            </div>
          </template>
        </el-dialog>
      </el-row>
    </div>
  </div>
</template>

<script >
import { Search } from '@element-plus/icons-vue'
import {
  ApiGetBasicData_MenuInfoSelectListAsync,
  ApiGetBasicData_MenuInfoListAsync,
  ApiBatchDeletionBasicData_MenuInfoAsync,
  ApiCreateBasicData_MenuInfoAsync,
  ApiUpdateBasicData_MenuInfoAsync
} from '@/api/basic/basicDataMenuInfoApi'
import { formatTime, capitalizeFirstLetter } from '../../utils/index'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { ElMessageBox, ElNotification } from 'element-plus'

export default {
  name: 'MenuInfoView',
  data() {
    return {
      UpdateDialogVisible: false,
      queryUpdateMenuInfoForm: {},
      MenuInfoOptions: [],
      UpdateMenuInfoForm: {},
      CreateMenuInfoForm: {
        MenuInfoNo: null,
        MenuInfoName: null
      },
      CreateMenuInfoRules: {
        Path: [{ required: true, trigger: 'blur', message: '地址不能为空' }],
        MenuInfoName: [{ required: true, trigger: 'blur', message: '菜单名称不能为空' }]
      },
      ruleForm: {
        name: ''
      },
      centerDialogVisible: false,
      selectedRows: [], // 存储选中的行数据
      queryMenuInfoParam: {
        GoodsReceipttimeStart: null,
        GoodsReceipttimeEnd: null,
        MenuInfoName: null
      },
      tableData: [] // 表格数据
    }
  },
  setup() {
    return {
      Search,
      zhCn
    }
  },
  created() {
    this.SearchMenuInfo()
  },
  methods: {
    //确认更新
    UpdateMenuInfoDialog() {
      this.$refs.UpdateMenuInfoForm.validate((valid) => {
        if (valid) {
          ApiUpdateBasicData_MenuInfoAsync(this.UpdateMenuInfoForm)
            .then((res) => {
              if (res.data.data) {
                ElNotification({
                  message: '更新成功',
                  offset: 100,
                  type: 'success',
                  duration: 2000
                })
                this.UpdateDialogVisible = false
                this.SearchMenuInfo()
              }
            })
            .catch(() => {
              ElNotification({
                message: '更新失败',
                type: 'warning',
                offset: 100,
                duration: 2000
              })
            })
        }
      })
    },
    //更新菜单
    UpdateMenuInfo(res) {
      this.UpdateDialogVisible = true
      this.UpdateMenuInfoForm = capitalizeFirstLetter(res)
      ApiGetBasicData_MenuInfoSelectListAsync(this.queryUpdateMenuInfoForm)
        .then((res) => {
          this.MenuInfoOptions = res.data.data
        })
        .catch(() => {
          console.log()
        })
    },
    //删除菜单
    DeleteMenuInfoSingle(res) {
      this.selectedRows = []
      this.selectedRows.push(res)
      this.batchDeletionMenuInfo()
    },
    //添加菜单
    CreateMenuInfoDialog() {
      this.$refs.CreateMenuInfoForm.validate((valid) => {
        if (valid) {
          ApiCreateBasicData_MenuInfoAsync(this.CreateMenuInfoForm).then((res) => {
            if (res.data.data) {
              ElNotification({
                message: '添加菜单成功',
                offset: 100,
                type: 'success',
                duration: 2000
              })
              this.centerDialogVisible = false
              this.SearchMenuInfo()
            }
          })
        }
      })
    },

    //获取用户选择项
    handleSelectionChange(select) {
      // 提取传递过来的对象中的"id"字段，并存储到this.selectedRows中
      this.selectedRows = select.map((item) => item.id)
    },
    //添加菜单
    addMenuInfo() {
      this.CreateMenuInfoForm = {}
      this.centerDialogVisible = true
      ApiGetBasicData_MenuInfoSelectListAsync(this.queryMenuInfoParam)
        .then((res) => {
          this.MenuInfoOptions = res.data.data
        })
        .catch(() => {
          console.log()
        })
    },
    //指删除菜单
    batchDeletionMenuInfo() {
      if (this.selectedRows.length < 1) {
        ElNotification({
          message: '请先选择一条或更多信息',
          type: 'warning',
          offset: 100,
          duration: 2000
        })
        return
      }
      ElMessageBox.confirm('确实要删除这些信息吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          ApiBatchDeletionBasicData_MenuInfoAsync(this.selectedRows)
            .then((res) => {
              if (res.data.data) {
                ElNotification({
                  message: '删除成功',
                  offset: 100,
                  type: 'success',
                  duration: 2000
                })
                this.selectedRows = []
                this.SearchMenuInfo()
              }
            })
            .catch(() => {
              this.selectedRows = []
            })
        })
        .catch(() => {
          this.selectedRows = []
        })
    },
    //时间转换
    formatColumnTime(row, column, time) {
      return formatTime(time)
    },

    // 搜索
    SearchMenuInfo() {
      ApiGetBasicData_MenuInfoListAsync(this.queryMenuInfoParam)
        .then((res) => {
          this.tableData = res.data.data
        })
        .catch((error) => {
          console.log('请求失败：', error)
        })
    }
  }
}
</script>

<style lang="less"  scoped>
@import '../../assets/globle/index.css';
</style>